<script type="text/javascript" language="javascript" src="./include/DataTables/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="./include/DataTables/media/js/dataTables.colVis.js"></script>
<script type="text/javascript" language="javascript" src="./include/DataTables/media/js/dataTables.tableTools.js"></script>
<link rel="stylesheet" type="text/css" href="./include/DataTables/media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="./include/DataTables/media/css/dataTables.colVis.css">
<link rel="stylesheet" type="text/css" href="./include/DataTables/media/css/dataTables.tableTools.css">
<script type="text/javascript" language="javascript">
    $(document).ready(function() {
        $('#familias').DataTable({
            dom: 'C T<"clear">lfrtip',
            "tableTools": {
                "sSwfPath": "./include/DataTables/media/swf/copy_csv_xls_pdf.swf",
                "aButtons": [
                    {
                        "sExtends": "collection",
                        "sButtonText": "Exportar",
                        "aButtons": [
                            {
                                "sExtends": "csv",
                                "sButtonText": "CSV",
                                "sToolTip": "Exportar Archivo Plano",
                                "sFileName": 'familias.csv'
                            },
                            {
                                "sExtends": "xls",
                                "sButtonText": "Excel",
                                "sToolTip": "Exportar Excel",
                                "sFileName": 'familias.xls'
                            }
                        ]
                    }
                ]
            },
            "aoColumnDefs": [
                {"bVisible": false, "aTargets": []}],
            "colVis": {
                "buttonText": "Ver/Ocultar Columnas",
                exclude: [0]
            },
            "oLanguage": {
                "sLengthMenu": "<div class='dataTables_info'><font size='3'>Mostrando _MENU_ registros por página</font></div>",
                "sZeroRecords": "No existe resultados",
                "sInfo": "<font size='3'><strong> _START_ - _END_ de _TOTAL_ registros</strong></font>",
                "sInfoEmpty": " 0 - 0 de 0 registros",
                "sInfoFiltered": "(Filtro de _MAX_ registros)",
                "sSearch": "<font size='3'>Filtrar:</font>",
                "oPaginate": {
                    "sNext": "<font size='3'>Siguiente</font>",
                    "sPrevious": "<font size='3'>Anterior</font>"
                }
            }
        });
    });
</script>
<div class="block-title">
    Informaci&oacute;n Socioecon&oacute;mica
</div>
<div id="tabs">
    <ul>
        <li class="tab_active">
            <a title="Ver Familias" href="socioeconomica.php" target="_self">Ver Familias</a>
        </li>
        <!--<li>
            <a title="Crear Familia" href="crearFamilia.php" target="_self">Crear Familia</a>
        </li>-->
    </ul>
</div>
<br>
<form id="familias_search" action="" method="post" >
    <table>
        <tr valign="top">
            <td class="head">Tipo identificaci&oacute;n Propietario</td>
            <td class="odd" style="white-space: nowrap;"><select name="tipoIdentificacion">
                    <option value="0">Seleccione uno...</option>
                    <option value="1">C&eacute;dula de Ciudadan&iacute;a</option>
                    <option value="4">C&eacute;dula de Extranjer&iacute;a</option>
                </select></td>
        </tr>
        <tr valign="top">
            <td class="head">Identificaci&oacute;n Propietario</td>
            <td class="odd" style="white-space: nowrap;"><input type="text" name="identificacion" size="35" maxlength="100"></td>
        </tr>
        <tr valign="top">
            <td class="head">Nombre Propietario</td>
            <td class="odd" style="white-space: nowrap;"><input type="text" name="nombres" size="35" maxlength="100"></td>
        </tr>
        <tr valign="top">
            <td class="head">N&uacutemero Cuenta / C&eacute;lular</td>
            <td class="odd" style="white-space: nowrap;"><input type="text" name="numeroCuenta" size="35" maxlength="100"></td>
        </tr>
        <tr valign="top">
            <td class="head"></td>
            <td class="odd" style="white-space: nowrap;"><input type="submit" value="Buscar" id="submit" name="submit" class="formButton"></td>
        </tr>
    </table>
</form>
<br>
<table id="familias" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Id</th>
            <th>Identificaci&oacute;n</th>
            <th>Nombres</th>
            <th>Apellidos</th>
            <th>N&uacutemero Cuenta</th>
            <th>Banco</th>
            <th>Estado</th>
        </tr>
    </thead>
    <tbody>
        <{foreach item=familia from=$rsFamilias}>
        <tr class="odd">
            <td><a href="editarFamilia.php?id=<{$familia.idfamilia}>" target="_self"><{$familia.idfamilia}></a></td>
            <td><{$familia.tipo_identificacion}> <{$familia.identificacion}></td>
            <td><{$familia.nombres}></td>
            <td><{$familia.apellidos}></td>
            <td><{$familia.numero_cuenta}></td>
            <td><{$familia.banco_cuenta}></td>
            <td><{$familia.estado}></td>
        </tr>
        <{/foreach}>
    </tbody>
</table>
<br>
<br>